<template>
  <div class="authority">
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="昵称">
          <el-input v-model="searchInfo.nickName" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">
            查询
          </el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box unit">
      <el-table :data="tableData" row-key="id">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column align="left" label="头像">
          <template #default="scope">
            <img v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl"
              style="width: 50px;height:50px;border-radius: 50%;">
            <img v-else src="@/assets/noBody.png" style="width: 50px;height:50px;border-radius: 50%;">
          </template>
        </el-table-column>
        <el-table-column align="left" label="昵称" prop="nickName" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="鱼池名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="钓鱼时长" prop="duration" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="钓鱼重量" prop="weight" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" label="状态">
          <template #default="scope">
            {{scope.row.fishStatus==1?'进行中':'已结束'}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="开始时间" show-overflow-tooltip>
          <template #default="scope">
            {{ formatTimestamps(scope.row.startAt) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="结束时间" show-overflow-tooltip>
          <template #default="scope">
            {{ formatTimestamps(scope.row.endAt) }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="钓鱼时长">
          <template #default="scope">
            {{ scope.row.duration }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="获得积分" prop="points" show-overflow-tooltip></el-table-column>
        <el-table-column align="left" fixed="right" label="操作" min-width="140">
          <template #default="scope">
            <el-button type="primary" link @click="finish(scope.row)">
                 结束钓鱼
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-drawer v-model="dialogFormVisible" :size="appStore.drawerSize" :before-close="handleClose" :show-close="false">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ dialogTitle }}</span>
          <div>
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="enterDialog">确定</el-button>
          </div>
        </div>
      </template>
      <el-form v-if="dialogFormVisible" ref="yyglForm" label-width="150" :model="form" :rules="rules">
        <el-form-item label="钓鱼重量" prop="weight">
          <el-input v-model.number="form.weight" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script setup>
import {
  userFishLog,
  fishEnd
} from '@/api/diaochangguanli'
import {
  getAuthorityList
} from '@/api/authority'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { formatTimestamps } from '@/utils/format'
// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()
const form = ref({
   userFishId:'',
  weight:''
})

const searchInfo = ref({
  nickName: ''
})

const userStore = useUserStore()

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const rules = reactive({
  weight: [{ required: true, message: '请输入重量', trigger: 'blur' }]
})

const yyglForm = ref(null)

const initForm = () => {
  yyglForm.value.resetFields()
  form.value = {
    userFishId:'',
    weight:''
  }
}

const isEdit = ref(false)
const dialogTitle = ref('新增')
const addUnit = () => {
  dialogTitle.value = '新增'
  isEdit.value = false
  dialogFormVisible.value = true
}
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
}

const handleClose = (done) => {
  initForm()
  done()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
  const res = await userFishLog({
    pageNumber: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value
  })
  if (res.code == 200) {
    tableData.value = res.result.data
    total.value = res.result.total
  }
}
getTableData()

const roleList = ref([])

onMounted(() => {

})
const statusChange = (id, val) => {
  groundsChangeStatus(id).then(res => {
    ElMessage({
      type: 'success',
      message: '状态修改成功!'
    })
    getTableData()
  })
}

const enterDialog = async () => {
  yyglForm.value.validate(async (valid) => {
    if (valid) {
      console.log(form.value, 'form.value');
      let res
      if (isEdit.value) {
        res = await fishEnd(form.value)
      } else {
        res = await fishEnd(form.value)
      }
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '结束钓鱼成功' 
        })
        getTableData()
      }
      initForm()
      dialogFormVisible.value = false
    }
  })
}

const delUnit = (row) => {
  ElMessageBox.confirm(
    '确认删除?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    const res = await groundsDelete(row.id)
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      getTableData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}

const finish = async (row) => {
  dialogTitle.value = '结束钓鱼'
  form.value.userFishId = row.id
  dialogFormVisible.value = true
}

const onSubmit = () => {
  page.value = 1
  getTableData()
}

const onReset = () => {
  page.value = 1
  searchInfo.value = {
    nickName: ''
  }
  getTableData()
}
</script>

<style lang="scss" scoped>

</style>
